import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Icon, Tag, message, Modal, Popover, Button } from 'antd';
import {fetchArgs,FetchURL,fetchData,removeData,changePage} from '../../store/actions';
import FormCheckType from '../../components/form-checktype'

class _CheckType extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible:false,
            id:null,
            user: this.props.user,
            title:'',
            modalInitial:'',
            confirmLoading: false,
            CheckTypeLen:0
        };
        this._changePage = this._changePage.bind(this);
        this.fetchCheckType=this.fetchCheckType.bind(this);
        this.onSelectChange = this.onSelectChange.bind(this);
        this.reFetch = this.reFetch.bind(this);
        this.Edit = this.Edit.bind(this);
        this.delData = this.delData.bind(this);
    };
    fetchCheckType(){
        const _this = this;
        let _args = Object.assign({},fetchArgs);
        _args.URL = FetchURL.CHECKTYPE;
        _args.IsAuth = true;
        _args.Succ = function (res) {
            _this.setState({
                data: res.content,
                CheckTypeLen:res.content.length
            });
        };
        _this.props.dispatch(fetchData(_args));
    };
    componentWillMount(){
        this.fetchCheckType();
    };
    static contextType = {
        router:React.PropTypes.object
    };
    _changePage(){
        // this.props.dispatch(changePge(''));
    };
    onSelectChange(selectedRowKeys) {
        this.setState({ selectedRowKeys });
    };
    reFetch(){
        this.setState({
            visible:false,
            id:null,
            targetData:null
        });
        this.fetchCheckType();
    };
    delData(e){
        e.preventDefault();
        const _t = e.target.dataset;
        this.setState({id:_t.id});
        const modalOpts = {
            title:'删除数据项',
            content: `要删除 ${_t.name} 吗？`,
            okText: ` 删除 `,
            onOk:this.delOk.bind(this)
        };
        Modal.confirm({...modalOpts})
    };
    delOk(){
        const _this = this;
        let _args = Object.assign({},fetchArgs);
        _args.Id = this.state.id;
        _args.URL = FetchURL.CHECKTYPE;
        _args.IsAuth = true;
        _args.Succ = function (res) {
            message.success('删除检查分类成功', 1, function () {
                _this.reFetch();
                _this.setState({
                    visible: false,
                    id: null,
                    title: '',
                    modalInitial: '',
                    confirmLoading: false
                });
            });
        };
        _this.props.dispatch(removeData(_args));
    };
    addData(e){
        e.preventDefault();
        this.setState({
            visible:true,
            id:null,
            title:'新建',
            targetData:null
        });
    };
    Edit(e){
        e.preventDefault();
        const _t = e.target.dataset;
        const targetData = _.filter(this.state.data,{id: parseInt(_t.id)})[0];
        this.setState({
            user: this.props.user,
            id : _t.id,
            visible:true,
            title:'编辑',
            targetData:targetData
        });
    };
    onCancel(){
        this.setState({
            visible:false
        });
    };
    render(){
        const columns=[{
            title:'编码',
            dataIndex:'code',
            width:100
        },{
            title:'名称',
            dataIndex:'name',
            width:200
        }, {
            title:'助记符',
            dataIndex:'mnemonic',
            width:100
        }, {
            title:'状态',
            dataIndex:'status',
            width:100,
            className: 'ant-column-status',
            render:(text,record)=>{
                switch (text){
                    case 1:
                    case '1':
                        return <span style={{color:'green'}}>启用</span>;
                    case 0:
                    case '0':
                        return <span style={{color:'red'}}>未启用</span>;
                    default:
                        return <span>未知</span>;
                }
            }
        },{
            title:'操作',
            width:200,
            className: 'ant-column-operation',
            render:(text,record) => {
                return(
                    <div>
                        <a href="#" data-id={`${record.id}`} onClick={this.Edit}>编辑</a>
                        <span className="ant-divider"></span>
                        <a href="#" data-name={`${record.name}`} data-id={`${record.id}`} onClick={this.delData}>删除</a>
                    </div>
                );
            }
        }];
        const dataLen = this.state.CheckTypeLen;
        const pagination = {
            total:dataLen,
            showSizeChanger:true,
            onShowSizeChange(current,pageSize){},
            onChange(current){}
        };
        const rowSelection = {};
        return(
            <div id="checktype">
                <div style={{overflow: 'hidden', padding: '10px 0'}}>
                    <div style={{float:'left'}}>
                        <Button type="primary" size="large" icon="plus" onClick={this.addData.bind(this)}>新建</Button>
                    </div>
                </div>
                <Table bordered rowSelection={rowSelection} columns={columns} dataSource={this.state.data} pagination={pagination}/>
                <FormCheckType
                    user={this.state.user}
                    visible = {this.state.visible}
                    title = {this.state.title}
                    confirmLoading = {this.state.confirmLoading}
                    targetData = {this.state.targetData}
                    onCancel = {this.onCancel.bind(this)}
                    dispatch={this.props.dispatch}
                    id={this.state.id}
                    reFetch ={this.reFetch}
                />
            </div>
        )
    };
}
let CheckType;
export default CheckType = connect((state) => {
    const {user} = state.rootReducer;
    return {user}
})(_CheckType);